<template>

  <div class="root">
    <!--  背景图片-->
    <img class="bg" src="~@/assets/images/login_bg.png"></img>
    <!--    顶部-->
    <div class="top">
      <div class="t1"></div>
      <div class="t2">中信银行实习平台后台管理系统</div>
      <div class="t3">欢迎使用</div>
    </div>
    <!--    主体表单-->
    <div class="main">
      <n-button text color="#1890FF" class="n_button_text1">账户密码登录</n-button>
      <n-form :rules="rules" class="n_form" :model="user">
        <n-form-item path="mobile" class="n_form_item">
          <n-input
              clearable
              v-model:value="mobile"
              placeholder="用户名"
              @keyup.enter.native="enter"
          >
            <template #prefix>
              <n-icon color="black" :component="UserOutlined" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item path="password" class="n_form_item">
          <n-input
              show-password-on="click"
              placeholder="密码"
              v-model:value="password"
              type="password"
              @keyup.enter.native="enter"
          >
            <template #prefix>
              <n-icon color="black" :component="LockOutlined" />
            </template>
          </n-input>
        </n-form-item>
      </n-form>
      <n-space class="n_check">
        <n-checkbox v-model:checked="autoLogin" size="medium" label="自动登录" />
        <n-button text type="info" class="n_button_text2">忘记密码？</n-button>
      </n-space>
      <!--      登录-->
      <n-button color="#1890FF" :loading="loading" class="n_button" @click="submit" @keyup.enter.native="enter">
        登录
      </n-button>
    </div>
    <!--    尾部-->
    <div class="foot">
      <div class="foot1"></div>
      <div class="foot2">&copy; 2024 中信银行实习平台</div>
    </div>
  </div>

</template>

<script>
// 登录页面
import {onMounted,ref,reactive,toRefs} from "vue";
import { refreshToken, Login, getUserInfo, Password } from "@/api/login";
import {useRouter} from "vue-router";
import { UserOutlined ,LockOutlined } from '@vicons/antd';
export default {
  setup(){
    // 路由
    const router = useRouter()
    // 挂载 message 消息提示
    const message = window.$message

    // 表单信息
    const user = reactive({
      mobile: '',
      password: ''
    })
    // 验证规则
    const rules = {
      mobile: {
        required: true,
        trigger: "blur",
        message: "请输入电话号码",
      },
      password: {
        required: true,
        trigger: "blur",
        message: "请输入密码",
      }
    };
    // 自动登录
    const autoLogin = ref(true)
    // 键盘回车登录
    const enter = ()=>{
      submit()
    }
    // 登录加载
    const loading = ref(false)

    // 点击登录事件
    const submit = ()=>{
      // 开始加载
      loading.value = true;
      // 请求数据 验证登录
      Login(user).then((res)=>{
        // console.log(res)
        // 验证成功
        if(res.code === 0){
          // 添加token
          window.localStorage.setItem('token',res.data.token)
          message.success('登录成功！')
          router.push({path:'/'})
        }else {
          message.error(res.message)
        }
        // 加载完成
        loading.value = false;
      })

    }


    return {
      user,
      ...toRefs(user),
      rules,
      loading:loading,
      enter,
      autoLogin,
      submit,
      UserOutlined,
      LockOutlined,

    }

  },
}

</script>

<style>
.bg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
//主体
.root{
  height: 100vh;
  min-height: 590px;
//border: 1px solid red;
}
.top{
  height: 30vh;
//border: 1px solid green;
}
.main{
  height: 50vh;
//border: 1px solid yellow;
}
.foot{
  height: 20vh;
//border: 1px solid blue;
}

/*顶部*/
.t1{
  height: 50%;
//border: 1px solid red;
}
.t2{
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
.t3{
  font-size: 14px;
  font-weight: lighter;
  text-align: center;
}


/*中部*/
.n_button_text1{
  font-size: 16px;
  border-bottom: 2px solid blue;
  padding-bottom: 10px;
  margin: 0 calc(50% - 48px);
}
.n_form{
  margin: 0 calc(50% - 160px) 30px;
}
.n_form_item{
  height: 60px;
}
.n_check{
  margin: 15px calc(50% - 160px);
}
.n_button_text2{
  margin-left: 150px;
}
.n_button{
  width: 320px;
  height: 40px;
  margin: 15px calc(50% - 160px) !important;
  font-size: 16px
}

/*尾部*/
.foot1{
  height: 70%;
}
.foot2{
  text-align: center;
}
</style>